<template>
	<Form :label-width="90" label-position="right" style="margin-top:12px">
		<FormItem label="问题描述">
			<Input v-model="describe" />
		</FormItem>
		<FormItem label="添加附件">
			<Upload :max-size=10240 :on-exceeded-size="handleExceeded" :on-preview='previewFile'
				action="/file/upload/" multiple ref="upload" with-credentials>
				<Button ghost>上传</Button>
			</Upload>
		</FormItem>
	</Form>
</template>
<script lang='ts'>
	import { Component, Vue } from "vue-property-decorator";
	import { Button, Form, FormItem, Input, Modal, Upload } from "view-design";
	import { CreateElement, VNode } from "vue";

	@Component({
		components: {
			Input,
			Form,
			FormItem,
			Upload,
			Button
		}
	})
	export default class Normal extends Vue {
		describe:string = "";

		handleExceeded () {
			this.$Notice.error({ desc: "文件大小超出限制" });
		}

		previewFile (file:any) {
			let url = file.response.data.fileurl;
			if (!file.response.data.image) {
				window.open(url);
			} else {
				const config = {
					render (h:CreateElement):VNode {
						return h("img", { attrs: { src: url }, staticStyle: { width: "100%" } });
					},
					width: 800
				};
				// @ts-ignore
				Modal.info(config);
			}
		}

		getInfo (oid:string):any {
			return {
				opt: "dealevent",
				describe: this.describe,
				eid: this.$route.params.id,
				oid,
				fileids: (this.$refs.upload as any).fileList.map((t:any) => t.response.data.docId)
			};
		}
	}
</script>
